<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>input - 表单类</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no,email=no" />
<link rel="apple-touch-icon" href="../../yo.png" />
<link rel="shortcut icon" href="../../shortcut.png" />
<link rel="stylesheet" href="../../usage/export/yo-input.css" />
</head>
<body>

<div class="yo-flex">
    <header class="yo-header m-header">
        <h2 class="title">yo-input</h2>
        <a href="../index.html" class="regret yo-ico">&#xf07d;</a>
        <a href="../../doc/element.html#yo-input" class="affirm">文档</a>
    </header>
    <div class="flex">
        <section class="yo-list yo-list-group m-demo">
            <h3 class="label">Inline Form：</h3>
            <label class="item item-input">
                <span class="mark">账号</span>
                <input type="text" class="yo-input flex" placeholder="必须为中文" />
            </label>
            <label class="item item-input">
                <span class="mark">密码</span>
                <input type="text" class="yo-input flex" placeholder="必须为中文" />
            </label>
        </section>
        <section class="m-desc">
            <h3 class="title">使用 `yo-list` 的 `item-input` 即可：</h3>
            <xmp><div class="yo-list">
    <label class="item item-input">
        <span class="mark">账号</span>
        <input type="text" class="yo-input flex" placeholder="必须为中文" />
    </label>
    <label class="item item-input">
        <span class="mark">密码</span>
        <input type="text" class="yo-input flex" placeholder="必须为中文" />
    </label>
</div></xmp>
        </section>

        <section class="yo-list yo-list-group m-demo">
            <h3 class="label">Placeholder Form：</h3>
            <label class="item item-input">
                <input type="text" class="yo-input" placeholder="用户名" />
            </label>
            <label class="item item-input">
                <input type="text" class="yo-input" placeholder="密码" />
            </label>
            <label class="item item-input">
                <textarea class="yo-input" placeholder="留言"></textarea>
            </label>
        </section>

        <section class="m-desc">
            <h3 class="title">使用 `yo-list` 的 `item-input` 即可：</h3>
            <xmp><div class="yo-list">
    <label class="item item-input">
        <input type="text" class="yo-input" placeholder="用户名" />
    </label>
    <label class="item item-input">
        <input type="text" class="yo-input" placeholder="密码" />
    </label>
    <label class="item item-input">
        <textarea class="yo-input" placeholder="留言"></textarea>
    </label>
</div></xmp>
        </section>

        <section class="yo-list yo-list-group m-demo">
            <h3 class="label">Stacked Form：</h3>
            <label class="item item-input item-stacked">
                <span class="mark">账号</span>
                <input type="text" class="yo-input" placeholder="不能是中文" />
            </label>
            <label class="item item-input item-stacked">
                <span class="mark">密码</span>
                <input type="text" class="yo-input" placeholder="10个以上字符" />
            </label>
            <label class="item item-input item-stacked">
                <span class="mark">内容</span>
                <textarea class="yo-input" placeholder="100字以内"></textarea>
            </label>
        </section>

        <section class="m-desc">
            <h3 class="title">使用 `yo-list` 的 `item-input` 和 `item-stacked` 即可：</h3>
            <xmp><div class="yo-list">
    <label class="item item-input item-stacked">
        <span class="mark">账号</span>
        <input type="text" class="yo-input" placeholder="不能是中文" />
    </label>
    <label class="item item-input item-stacked">
        <span class="mark">密码</span>
        <input type="text" class="yo-input" placeholder="10个以上字符" />
    </label>
    <label class="item item-input item-stacked">
        <span class="mark">内容</span>
        <textarea class="yo-input" placeholder="100字以内"></textarea>
    </label>
</div></xmp>
        </section>

        <section class="yo-list yo-list-inset m-demo">
            <label class="item item-input">
                <input type="text" class="yo-input" placeholder="用户名" />
            </label>
            <label class="item item-input">
                <input type="text" class="yo-input" placeholder="密码" />
            </label>
            <label class="item item-input">
                <textarea class="yo-input" placeholder="留言"></textarea>
            </label>
        </section>

        <section class="m-desc">
            <h3 class="title">input和textarea都可以使用：</h3>
            <xmp><div class="yo-list yo-list-inset">
    <label class="item item-input">
        <input type="text" class="yo-input" placeholder="用户名" />
    </label>
    <label class="item item-input">
        <input type="text" class="yo-input" placeholder="密码" />
    </label>
    <label class="item item-input">
        <textarea class="yo-input" placeholder="留言"></textarea>
    </label>
</div></xmp>
        </section>

    </div>
</div>

</body>
</html>